<script setup>
import { defineProps, onMounted, ref } from 'vue';
import applyCheck from './applyCheck.vue'; // 引入 ApplyCheck 组件
import {ElMessage} from "element-plus";
// 接收父组件传递的数据
const props = defineProps({
  userName: { type: String, required: true }, // 用户名，必填项
  userAvatar: { type: String, default: '/src/assets/avatar.jpg' }, // 用户头像，默认值
  messageContent: { type: String, required: true }, // 消息内容，必填项
  MessageType: { type: String, required: true }, // 消息类型，必填项
  PassageID: { type: Number, required: true },
  adoptID: { type: Number, required: true }
});

// 创建响应式变量
let dialogVisible = ref(false); // 控制 el-dialog 是否可见
let notRead = ref(false); // 控制 el-badge 是否隐藏
const appraisedialogVisible = ref(false); // 控制弹窗的显示状态

// 处理点击事件
const open = () => {
  
  notRead.value = true; // 设置为已读状态，隐藏 badge
  sessionStorage.setItem(`readStatus-${props.PassageID}-${props.adoptID}`, 'read');
  if (props.messageContent === "申请领养") {
    const confirmstatus = sessionStorage.getItem(`hasconfirmed-${props.PassageID}-${props.adoptID}`);
    if (!confirmstatus) {
      dialogVisible.value = true;
    }
    else{
      ElMessage({
                        message: '您已处理过该领养申请！',
                        type: 'success',
                        style: 'font-size:25px;font-weight:bold;',
                        offset: 55,
                        grouping:true
                    })
    }
  const adoptCheck = { PassageID: props.PassageID, adoptID: props.adoptID };
  sessionStorage.setItem('adoptCheck', JSON.stringify(adoptCheck));
  }
};

// const userData = JSON.parse(sessionStorage.getItem('token'));
// const userID = userData.userID;
const value = ref(0); // 评价星级
const textarea = ref(''); // 输入的评价内容

onMounted(() => {
   // Check the read status in sessionStorage on mount
    const readStatus = sessionStorage.getItem(`readStatus-${props.PassageID}-${props.adoptID}`);
    if (readStatus) {
      notRead.value = true;  // Hide badge if passage has been read
    }
    const confirmstatus = sessionStorage.getItem(`hasconfirmed-${props.PassageID}-${props.adoptID}`);
    if (confirmstatus) {
      dialogVisible.value=false;
    }
  console.log(props.adoptID);
});

const handleHasConfirm=()=>{

sessionStorage.setItem(`hasconfirmed-${props.PassageID}-${props.adoptID}`, 'true'); // 存储确认状态
}
</script>

<template>
  <el-card
    style="width: 80%; height: auto; border-radius: 20px; margin-top: 10px; margin-left: 10%;"
    @click="open"
  >
    <!-- el-badge，使用 notRead 控制是否隐藏 -->
    <el-badge
      value="new"
      :offset="[10, -10]"
      style="position: absolute; right: 12%;"
      class="item"
      :hidden="notRead"
    />
    <el-row gutter="40">
      <el-avatar
        span="6"
        :src="userAvatar"
        :size="40"
        style="margin-left: 10px;"
      />
      <el-col span="18" style="margin-top: 0;">
        <div style="margin-top: 0;">
          <span style="font-size: 18px;">{{ userName }}</span> <br />
          <div v-html="messageContent"></div>

          <!-- 只有当 MessageType 为 'adopt_success' 时才显示按钮 -->
          <el-button v-if="MessageType === 'adopt_success'" @click="appraisedialogVisible = true" class="edit" style="margin-left: 400px;" round>
            评价对方
          </el-button>
        </div>
      </el-col>
    </el-row>
  </el-card>

  <!-- 弹出对话框 -->
  <el-dialog
    v-model="dialogVisible"
    @update:visible="dialogVisible = $event"
    title="申请详情"
  >
    <applyCheck :visible="dialogVisible" @close="dialogVisible=false" @hasconfirm="handleHasConfirm" />
  </el-dialog>

  <el-dialog
    style="align-items: center;"
    v-model="appraisedialogVisible"
    width="300"
    height="500"
    align-center
  >
    <el-row style="align-items: center; margin-left: 10px;">
      <span>请输入星级：</span>
      <el-rate v-model="value" size="large" style="margin-top: 0%;" />
    </el-row>
    <el-input
      v-model="textarea"
      style="width: 240px; margin-left: 10px;"
      :rows="5"
      type="textarea"
      placeholder="说点什么..."
    />
    <template #footer>
      <div class="dialog-footer">
        <el-row justify="center">
          <el-button @click="appraisedialogVisible = false" class="edit">取消</el-button>
          <el-button type="primary" @click="Makeappraise" class="edit">
            确认
          </el-button>
        </el-row>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.edit {
  
  color: #fff;
  background-color: rgb(255, 212, 102);
  border-color: rgb(255, 212, 102);
}
::v-deep(.edit:hover) {
  background-color: #ffe9b2;
  border-color: rgb(241, 224, 180);
  color: rgb(255, 255, 255);
}
</style>


